<template>
  <div style="background-color: #ebeef5">
    <el-row
      type="flex"
      class="row-bg"
      style="padding:5px"
    >
      <el-col
        :span="19"
        style="
          background-color: white;
          padding-left: 5px;
          padding-bottom: 10px;
          padding-top: 10px;
        "
      >
      &emsp;
        <!--搜索相关-->
        <span style="font-size: 14px">标签名称:</span>
        <el-input
          size="small"
          style="width: 20%"
          v-model="queryForm.tagName"
          readonlyd
        />&emsp;
        <el-button
          plain
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="getTagDataList()"
        >
          查询
        </el-button>
      </el-col>
      <el-col
        :span="12"
        style="
          background-color: white;
          text-align: right;
          padding-bottom: 10px;
          padding-top: 10px;
          padding-right: 10px;
        "
      >
        <el-button
          type="primary"
          plain
          size="mini"
          icon="el-icon-plus"
          @click="addTag()"
        >
          新增
        </el-button>
      </el-col>
    </el-row>

    <el-row
      type="flex"
      class="row-bg"
      style="padding: 5px"
    >
      <el-col :span="24">
        <div
          class=""
          style="
            background-color: white;
            padding-left: 5px;
          "
        >
          <!--table-->
          <vxe-table
            ref="multipleTable"
            :data="fileTableData"
            :height="heightY"
            border
            highlight-current-row
            tooltip-effect="dark"
            style="width: 100%"
            @row-click="handleSelectionChange"
          >
            <vxe-column
              type="index"
              align="center"
              width="45"
            />
            <vxe-column
              field="labelName"
              title="标签名称"
              align="center"
              width="610"
            />
            <vxe-column
              field="labelOrder"
              title="排序"
              align="center"
            />

            <vxe-column
              title="操作"
              align="center"
              width="600"
              header-align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  @click="editTag(scope.row.labelId)"
                  plain
                >
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  plain
                  @click="removeTag(scope.row.labelId)"
                >
                  删除
                </el-button>
              </template>
            </vxe-column>
          </vxe-table>
          <div
            style="
              width: 100%;
              float: left;
              text-align: center;
            "
          >
            <vxe-pager
              background
              @page-change="handleCurrentChange" 
              :current-page.sync="page.currentPage"
              :page-size.sync="page.pageSize"
              :total="page.totalResult"
              :layouts="[
                'PrevJump',
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'NextJump',
                'Sizes',
                'FullJump',
                'Total',
              ]"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <addTag
      ref="addTag"
      @refresh="getTagDataList"
    />
  </div>
</template>
  <script>
  import { getList, deleteTag } from "@/api/knowledge/label";
  import addTag from "./addTag";
  import store from "@/store";

  export default {
    name: `docSearchIndex`,
    components: { addTag },
    data () {
      return {
        dialogVisible: false,
        heightY: `${window.innerHeight - 230}px`,
        // 请求参数
        queryForm: {
          // 标签名
          tagName: ``,
        },
        page: {
          currentPage: 1,
          pageSize: 20,
          totalResult: 0,
        },
        fileTableData: [],
        loadingShowTable: false,
        fileBusinessTypeId: `111`,
        tableSelectRow:"",
      };
    },
    created () {
      this.init();
    },
    methods: {
      init () {
        this.getTagDataList();
      },
      getTagDataList () {
        this.loadingShowTable = true;
        const params = {
          data: {
            fileBusinessTypeId: this.fileBusinessTypeId,
            pageSize: this.page.pageSize,
            currentPage: this.page.currentPage,
            labelName: this.queryForm.tagName,
          },
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          userName: store.getters.userName.toString(),
        };
        getList(params).then((data) => {
          if (data.result) {
            this.fileTableData = data.resultdata.data;
            this.page.totalResult = data.resultdata.count;
            this.loadingShowTable = false;
          }
        });
      },
      handleCurrentChange ({ currentPage, pageSize }) {
        console.log(currentPage, pageSize,"212eee")
        this.page.currentPage = currentPage;
        this.page.pageSize = pageSize;
        this.getTagDataList();
      },
      handleSelectionChange (val) {
        this.tableSelectRow = val;
      },
      editTag (id) {
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs.addTag.init(id);
        });
      },
      removeTag (id) {
        this.$confirm(`是否删除此条记录?`, `提示`, {
          confirmButtonText: `确定`,
          cancelButtonText: `取消`,
          type: `warning`,
        }).then(() => {
          const params = {
            userId: store.getters.user_id.toString(),
            token: store.getters.token.toString(),
            userName: store.getters.userName.toString(),
            data: { labelId: id },
          };
          deleteTag(params).then((data) => {
            if (data.result) {
              this.$message({
                type: `success`,
                message: `删除成功`,
              });
              this.getTagDataList();
            }
          });
        });
      },
      addTag () {
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs.addTag.init();
        });
      },
    },
  };
</script>

  <style scoped lang="scss">
* {
  scrollbar-width: thin;
  scrollbar-color: #333 transparentize;
}
</style>
